More · Typography
Typography
Headlines in Lexend, body text in a classic serif, UI in system sans and technical values in mono. Below: the roles, the scale and how they work together in use.
The scale
From Tiny to H1
H1 · --text-h1 · Lexend 600
The quick brown fox
H2 · --text-h2 · Lexend 600
The quick brown fox jumps
H3 · --text-h3 · Lexend 600
The quick brown fox jumps over
H4 · --text-h4 · Lexend 600
The quick brown fox jumps over the lazy dog
H5 · --text-h5 · Lexend 600
The quick brown fox jumps over the lazy dog
Base · --text-base · Body
The quick brown fox jumps over the lazy dog. The body text runs in a comfortably readable serif and is capped at around 66 characters per line.
Small · --text-small · UI
The quick brown fox jumps over the lazy dog.
Tiny · --text-tiny · Mono
--color-brand · --radius-container
Overline · UI + --text-tiny
The quick brown fox
The styles
Lexend in four weights
Self-hosted, without an external font provider. The core headlines use 600 — the other styles are ready for accents.
Lexend 400 · Regular
The quick brown fox jumps over the lazy dog
Lexend 500 · Medium
The quick brown fox jumps over the lazy dog
Lexend 600 · Semibold — Default headline
The quick brown fox jumps over the lazy dog
Lexend 700 · Bold
The quick brown fox jumps over the lazy dog
In use
Headline meets body text
What matters: enough breathing room between heading and text, a clear measure, a calm hierarchy.
Example · Editorial
A sentence that takes a stance
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. A large headline in Lexend, below it calm serif body text at reading width — that creates calm instead of noise.
Example · Article
Subheading
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. The 30/70 column keeps the heading narrow and gives the text room — ideal for longer sections.
Example · Opening
Begin with a lead
Here the introductory paragraph deliberately uses the normal body text — it leads into the text without competing with the headline.
Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.
Keep exploring